<template>
  <!-- <el-carousel class="viewpaper-total" :interval="4000" type="card"  >
    <el-carousel-item class="viewpaper-lunbo" v-for="(option,index) in items" :key="index">
      <el-image class="viewpaper" :src="option.src"></el-image>
    </el-carousel-item>
  </el-carousel> -->
  <div>
    <el-carousel  :interval="3000" arrow="hover" class="viewpaper-tatal" :height="height">
      <el-carousel-item class="viewpaper-lunbo " v-for="(option,index) in items" :key="index">
        <el-image class="viewpaper" :src="option.src"></el-image>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                height:130+'px',
                items:[
                    { src:require('../assets/HomeBanner/HomeLunOverall.jpg')},
                    { src:require('../assets/HomeBanner/产品中心.jpg')},
                    { src:require('../assets/HomeBanner/关于我们.jpg')},
                    { src:require('../assets/HomeBanner/新闻中心.jpg')},
                    { src:require('../assets/HomeBanner/HomeLunWarehouse1.jpg')},
                ]
            }
        },
        method:{

        },
        mounted() {
            var w = window.innerWidth
            var h = 750
            h = w/2.61
            this.height=h+'px';
            let that = this;
            window.onresize = function windowResize() {
                // 通过捕获系统的onresize事件触发我们需要执行的事件
                var w = window.innerWidth
                var h = 485
                if (w > 1180) {
                    h = 485
                } else {
                    h = w/2.61
                }
                that.height=h+'px'
            }
        }

    }
</script>
<style scoped>
  div /deep/ .el-carousel__indicator--horizontal .el-carousel__button {
    width: 25px;
    height: 8px;
    background: transparent;
    border: 1px solid rgb(1,76,125);
    border-radius: 5px;
    opacity: 0.5;
  }
  div /deep/ .el-carousel__indicator--horizontal.is-active .el-carousel__button{
    width: 40px;
    height: 8px;
    background: rgb(0, 65, 147);
    opacity: 1;
  }
  .viewpaper-tatal{
    width: 100%;
    /* height: 100%; */
    padding: 0;
    margin: 0;
  }
  .viewpaper{
    width: 100%;
    height: 100%;
    max-width: 100%;
    /* max-height: 100%; */
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
